<!-- 博客列表页部分

设计思路：分为三个部分，导航栏1，左侧个人信息介绍2，右侧博客列表3
1用div表示，2和3用一个div括起来，然后分别用一个div表示 -->

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .navigation {
        display: flex;
        background-color: gray;
        opacity: 0.6;
        width: 100%;
        height: 50px;
        color: white;
    }
    .navigation img {
        /* opacity: 30%; */
        width: 45px;
        height: 45px;
        border-radius: 22.5px;
        margin-left: 30px;
    }
    .navigation span{
        line-height: 50px;
        width: 200px;
        padding-left: 30px;
        padding-right: 1400px;
    }
    .navigation div {
        line-height: 50px;
        justify-content: right;
        /* padding: 20px; */
        width: 50px;
        margin: auto auto;
    }

    #window {
        background-image: url(3456.jpg);
        background-repeat: no-repeat;
        /* background-size: contain; */
        background-size: cover;
        /* opacity: 0.4; */
    }

    .Main {
        display: flex;
        width: 1400px;
        height: 100%;
        border: 2px solid red;
        margin: 0 auto; 
        border-radius: 30px;
        /* background-color: white;
        opacity: 0.5; */
    }
    .one {
        width: 300px;
        height: 300px;
        margin-right: 10px;
        background-color: white;
        opacity: 0.5;
        border-radius: 30px;

        /* border: 2px solid greenyellow; */
    }
    .two {
        display: block;
        width: 1000px;
        height: 100%;
        background-color: white;
        opacity: 0.5;
        border-radius: 30px;

        /* border: 2px solid greenyellow; */
    
    }

</style>

<html id="window">

    <div class="navigation">  <!--  导航栏 -->
        <img src="234.png" alt="比特科技">
        <span>我的博客系统</span>
        <div>主页</div>
        <div>写博客</div>
        <div>注销</div>
    </div>


    <!-- // 然后是左侧个人信息和右侧博客列表 -->

    <div class="Main">

        <div class="one">
            <img src="头像.png" alt="这是我的头像">
            <div>宋浩</div>
            <a href="#"></a>
            <table>
                <tr>
                    <td>文章</td>
                    <td>分类</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>1</td>
                </tr>
            </table>

        </div>


        <div class="two"> 
            <h3>我的第一篇博客</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quos eum repellat corporis, quasi non, quod, itaque aspernatur vitae soluta ullam laudantium laboriosam reiciendis ea eligendi id repellendus inventore! Debitis.</p>
            <a href="#"></a>
        </div>
        <div class="two"> 
            <h3>我的第二篇博客</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quos eum repellat corporis, quasi non, quod, itaque aspernatur vitae soluta ullam laudantium laboriosam reiciendis ea eligendi id repellendus inventore! Debitis.</p>
            <a href="#"></a>
        </div>

    </div>
    <style>

    </style>



</html>







